<script setup lang="ts">
	import { reactive } from 'vue'
	import { Plus } from '@element-plus/icons-vue'

	// Props接收
	defineProps<{ a: any }>()
	// Emit返回
	const Emit = defineEmits(['update:a'])

	const state = reactive({ fileList: [], imgUrlList: [] })

	const successUpload = (res, file, fileList) => {
		const data = fileList.map((item) => ({ url: item.response.data}))
		state.fileList = data
    // console.log(state.imgUrlList)
		Emit('update:a', data)
	}
</script>

<template>
	<!-- 上传组件 -->
	<el-upload
		class="avatar-uploader"
		action="http://172.19.10.158:6001/main/query/upload"
		name="ys"
		list-type="picture-card"
		:on-success="successUpload"
		:file-list="a"
	>
		<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
	</el-upload>
</template>

<style scoped lang="scss">
	.avatar-uploader {
		.avatar {
			width: 178px;
			height: 178px;
			display: block;
		}
		// :deep(选择器) 深度选择器
		:deep(.el-upload) {
			border: 1px dashed var(--el-border-color);
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
			transition: var(--el-transition-duration-fast);
			&:hover {
				border-color: var(--el-color-primary);
			}
		}
		:deep(.el-icon.avatar-uploader-icon) {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			text-align: center;
		}
	}
</style>
